<template>
  <div class="">
    <el-form ref="rowsFromResult" :model="pluginData" label-width="150px" style="min-height: 300px;">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="pluginData.name"></el-input>
      </el-form-item>
      <el-form-item label="替换类型" prop="cat">
        <el-radio-group v-model="pluginData.cat">
          <el-radio :label="0">替换全部</el-radio>
          <el-radio :label="1">选择字段替换</el-radio>
          <el-radio :label="2">根据值类型替换</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="pluginData.cat === 0">
        <el-form-item label="值替换为" prop="setEmptyStringAll">
          <el-row type="flex">
            <el-input v-model="pluginData.replaceAllByValue" :disabled="pluginData.setEmptyStringAll === 'Y'" placeHolder="值替换为" style="margin-right: 20px;"></el-input>
            <el-checkbox v-model="pluginData.setEmptyStringAll" true-label="Y" false-label= "N">设置空字符串</el-checkbox>
          </el-row>
        </el-form-item>
        <el-form-item label="掩码(日期字段使用)" prop="replaceAllMask">
          <el-select v-model="pluginData.replaceAllMask" placeholder="转换格式" style="width:100%">
            <el-option
              v-for="item in maskList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-if="pluginData.cat === 1">
        <el-table :data="pluginData.fields" border style="width: 100%;" height="170" id="field">
          <el-table-column label="操作" align="center" fixed width="80" :resizable=false>
            <template slot-scope="scope">
              <div class="optionStyle">
                <el-button
                  type="text"
                  @click="removeFields(scope.$index)"
                >移除
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="name" label="输入字段">
            <template slot-scope="scope">
              <el-select v-model="scope.row.fieldName" filterable
                         allow-create placeholder="请选择">
                <el-option
                  v-for="item in fieldOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column property="replaceValue" label="值替换为">
            <template slot-scope="scope">
              <el-input v-model="scope.row.replaceValue" placeHolder="请填写替换后的值"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="replaceMask" label="掩码(日期字段使用)" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.replaceMask" placeholder="转换格式" style="width:100%">
                <el-option
                  v-for="item in maskList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column property="setEmptyString" label="设置空字符串">
            <template slot-scope="scope">
              <el-select v-model="scope.row.setEmptyString" placeholder="设置空字符串" style="width:100%">
                <el-option key="Y" value="Y" label="是">是</el-option>
                <el-option key="Y" value="N" label="否">否</el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex">
          <el-button class="el-table-add-row" icon="el-icon-plus" @click="addField()">添加</el-button>
        </el-row>
      </div>
      <div v-if="pluginData.cat === 2">
        <el-table :data="pluginData.valueTypes" border style="width: 100%;" height="170" id="field2">
          <el-table-column label="操作" align="center" fixed width="80" :resizable=false>
            <template slot-scope="scope">
              <div class="optionStyle">
                <el-button
                  type="text"
                  @click="removeFields(scope.$index)">移除
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="name" label="选择字段类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.typeName" filterable
                         allow-create placeholder="请选择">
                <el-option
                  v-for="item in fieldTypeColumns"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column property="typeReplaceValue" label="值替换为">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typeReplaceValue" placeHolder="请填写替换后的值"></el-input>
            </template>
          </el-table-column>
          <el-table-column property="replaceMask" label="掩码(日期字段使用)" >
            <template slot-scope="scope">
              <el-select v-model="scope.row.typeReplaceMask" placeholder="转换格式" style="width:100%">
                <el-option
                  v-for="item in maskList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column property="setTypeEmptyString" label="设置空字符串">
            <template slot-scope="scope">
              <el-select v-model="scope.row.setTypeEmptyString" placeholder="设置空字符串" style="width:100%">
                <el-option key="Y" value="Y" label="是">是</el-option>
                <el-option key="Y" value="N" label="否">否</el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex">
          <el-button class="el-table-add-row" icon="el-icon-plus" @click="addType()">添加</el-button>
        </el-row>
      </div>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button
             icon="el-icon-back"
             @click="cancel">取消
        </el-button>
        <el-button
          type="primary" icon="el-icon-check"
          @click="handleSaveData()">确定
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
/* eslint-disable new-cap */
import API from '../../../../../api/index'
import mxgraph from '../../../../../graph/VueMxGraphLoader'
const {
  mxUtils,
  mxCodec
} = mxgraph
export default {
  name: 'nullReplace',
  props: {
    name: String
  },
  components: {
  },
  data () {
    return {
      graph: null,
      maskList: [
        {code: 0, name: 'yyyyMMddHHmmss'},
        {code: 1, name: 'yyyy-MM-dd'},
        {code: 2, name: 'yyyy-MM-dd HH:mm:ss'},
        {code: 3, name: 'yyyy-MM-dd HH:mm:ss XXX'}
      ],
      fieldTypeColumns: [{code: 'Number', name: 'Number'},
        {code: 'String', name: 'String'},
        {code: 'Date', name: 'Date'},
        {code: 'Boolean', name: 'Boolean'},
        {code: 'Integer', name: 'Integer'},
        {code: 'BigNumber', name: 'BigNumber'},
        {code: 'Binary', name: 'Binary'},
        {code: 'Timestamp', name: 'Timestamp'},
        {code: 'Internet Address', name: 'IP 地址'}
      ],
      pluginData: {
        cat: 0,
        name: '',
        selectFields: 'N',
        selectValuesType: 'N',
        setEmptyStringAll: 'Y',
        replaceAllByValue: '',
        replaceAllMask: '',
        fields: [],
        valueTypes: []
      },
      temp: {
        cat: 0,
        name: '',
        selectFields: 'N',
        selectValuesType: 'N',
        setEmptyStringAll: 'Y',
        replaceAllByValue: '',
        replaceAllMask: '',
        fields: [],
        valueTypes: []
      },
      fieldOptions: []
    }
  },
  methods: {
    loadData (data) {
      if (data) {
        this.$forceUpdate()
        this.pluginData = Object.assign({}, data)
        this.pluginData.fields = this.pluginData.fields || []
        this.pluginData.valueTypes = this.pluginData.valueTypes || []
        this.temp = JSON.parse(JSON.stringify(data))
      }
    },
    // 保存表单数据
    handleSaveData () {
      if (this.pluginData.name) {
        this.$emit('savePluginData', this.pluginData)
      } else {
        this.$message({
          message: '步骤名称必填',
          type: 'warning'
        })
      }
    },
    cancel () {
      if (this.tempSelectValue) {
        this.saveTempPluginData(this.temp)
      } else {
        let data = JSON.parse(JSON.stringify(this.temp))
        data['name'] = this.pluginData.name
        this.saveTempPluginData(data)
      }
      this.$emit('cancel')
    },
    // 重置表单数据
    resetFormData (stepName) {
      this.$forceUpdate()
      this.$refs['rowsFromResult'].resetFields()
      this.pluginData = JSON.parse(JSON.stringify(this.temp))
      this.pluginData.name = stepName
    },
    setGraph (val) {
      this.graph = val
    },
    removeFields (index) {
      this.pluginData.fields.splice(index, 1)
    },
    async addField () {
      let obj = {
        fieldName: '',
        replaceValue: '',
        replaceMask: '',
        setEmptyString: 'N'
      }
      this.pluginData.fields.push(obj)
      this.$nextTick(() => {
        let container = this.$el.querySelector('#field > .el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
      if (this.fieldOptions.length === 0) {
        await this.getStreamField().then(res => {
          let tempFileds = []
          const tempStreamField = Object.assign([], res.data)
          tempStreamField.forEach(element => {
            let obj = {}
            obj['name'] = element.name
            obj['comments'] = element.comments
            tempFileds.push(obj)
          })
          this.$set(this, 'fieldOptions', tempFileds)
        })
      }
    },
    addType () {
      let obj = {
        typeName: '',
        typeReplaceValue: '',
        typeReplaceMask: '',
        setTypeEmptyString: 'N'
      }
      this.pluginData.valueTypes.push(obj)
      this.$nextTick(() => {
        let container = this.$el.querySelector('#field2 > .el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
    },
    async getStreamField () {
      const value = await this.getXml()
      if (this.pluginData.name) {
        return API.trans.inputFields(value, {'stepName': this.pluginData.name})
      } else {
        return []
      }
    },
    getXml () {
      this.saveTempPluginData(this.pluginData)
      const graph = this.graph
      const enc = new mxCodec(mxUtils.createXmlDocument())
      const node = enc.encode(graph.getModel())
      const value = mxUtils.getPrettyXml(node)
      return value
    },
    saveTempPluginData (formData) {
      this.$emit('saveTempPluginData', formData)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px !important;
}
.el-tabs /deep/ .el-tabs__content {
    padding: 15px !important;
}
.el-select {
    width: 100%;
}
.el-dialog__footer {
  margin-top: 10px;
}
.optionStyle button {
  margin: 0px
}
</style>
